//页面初次加载时，先获取用户信息，展示在页面上
window.onload =async function(){
   const users =await fetchUsers('all');
   renderUsers(users);
}

async function fetchUsers(name){//添加用户信息
    //获取用户输入的信息
    const res = await fetch(`http://localhost:3000/api/users?name=${name}`);
    const users = await res.json();//将响应结果转换为json对象
    return users.data;
}

function renderUsers(users) {  // 渲染用户信息
    const tbody = document.querySelector('tbody')
    tbody.innerHTML = ''//清空表格内容
    
    for (let i = 0; i < users.length; i++) {
      const tr = document.createElement('tr')
      tr.innerHTML = `
        <td>${users[i].id}</td>
        <td>${users[i].name}</td>
        <td>${users[i].age}</td>
        <td>${users[i].address}</td>
        `
      tbody.appendChild(tr)
    }
  }
  //输入姓名，点击查询按钮，查询用户信息，展示在页面上
const btn = document.querySelector('.search-container button')//获取按钮元素
const input = document.querySelector('#searchInput')//获取输入框元素
btn.addEventListener('click',async()=>{//添加点击事件
    //获取输入的值
    //向后端发送请求，将输入框的值作为参数传递
    const users =await fetchUsers(input.value);
    renderUsers(users);
})

